<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>二级导航菜单</title>
		<!-- ctrl+h即可调出查询与替换窗口 -->
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="navbar">
			<div class="nav">
				<ul>
					<li>
						<a href="javascript:;">一级菜单1</a>
					</li>
					<li>
						<a href="javascript:;">一级菜单2</a>
						<ol>
							<li><a href="javascript:;">二级菜单1</a></li>
							<li><a href="javascript:;">二级菜单2</a></li>
							<li><a href="javascript:;">二级菜单3</a></li>
							<li><a href="javascript:;">二级菜单4</a></li>
							<li><a href="javascript:;">二级菜单5</a></li>
							<li><a href="javascript:;">二级菜单6</a></li>
						</ol>
					</li>
					<li>
						<a href="javascript:;">一级菜单3</a>
						<ol>
							<li><a href="javascript:;">二级菜单1</a></li>
							<li><a href="javascript:;">二级菜单2</a></li>
							<li><a href="javascript:;">二级菜单3</a></li>
							<li><a href="javascript:;">二级菜单4</a></li>
							<li><a href="javascript:;">二级菜单5</a></li>
							<li><a href="javascript:;">二级菜单6</a></li>
						</ol>
					</li>
					<li>
						<a href="javascript:;">一级菜单4</a>
						<ol>
							<li><a href="javascript:;">二级菜单1</a></li>
							<li><a href="javascript:;">二级菜单2</a></li>
							<li><a href="javascript:;">二级菜单3</a></li>
							<li><a href="javascript:;">二级菜单4</a></li>
							<li><a href="javascript:;">二级菜单5</a></li>
							<li><a href="javascript:;">二级菜单6</a></li>
						</ol>
					</li>
					<li>
						<a href="javascript:;">一级菜单5</a>
					</li>
					<!-- 这个元素来定义滑动的线条 -->
					<li class="underline"></li>
				</ul>
			</div>
		</div>
	</body>
</html>
